<template>
  <div>
    <div
      v-for="item in arr"
      :key="item"
      class="box"
      @click="cl(item)"
      :class="com == item ? 'clo' : ''"
    >
      {{ item }}
    </div>
    <component :is="com"></component>
  </div>
</template>

<script>
import son1 from "./components/son1.vue";
import son2 from "./components/son2.vue";
import son3 from "./components/son3.vue";
export default {
  data() {
    return {
      arr: ["son1", "son2", "son3"],
      com: "son1",
    };
  },
  components: {
    son1,
    son2,
    son3,
  },
  methods: {
    cl(item) {
      this.com = item;
    },
  },
};
</script>

<style  scoped>
.box {
  width: 100px;
  height: 100px;
  outline: 1px solid red;
  display: inline-block;
}
.clo {
  background-color: rgba(68, 200, 230, 0.705);
  color: rgb(243, 144, 87);
  font-size: 20px;
}
</style>